<template>
<!-- 改绑手机 -->
  <div class="container">
    <v-header :title="title"></v-header>

    <div class="bar"></div>

    <div class="content">
      <form class="mui-input-group">
        <div class="mui-input-row old">
          <div class="input-box">
            <input type="password" class="mui-input-password" placeholder="请输入旧密码" maxlength="20" v-model="oldPassword">
          </div>
        </div>
        <p class="tip" v-if="(oldPassword != userPassword) && oldPassword">*密码不正确</p>

        <div class="mui-input-row new">
          <div class="input-box">
            <input type="password" class="mui-input-password" placeholder="请输入新密码" maxlength="20" v-model="newPassword1">
          </div>
        </div>

        <div class="mui-input-row again">
          <div class="input-box">
            <input type="password" class="mui-input-password" placeholder="请再次输入新密码" maxlength="20" v-model="newPassword2">
          </div>
        </div>
        <p class="tip" v-if="(newPassword1 != newPassword2) && newPassword1 && newPassword1">*密码不一致</p> 

        <div class="mui-button-row">
          <button type="button" class="mui-btn confirm-btn" @click="confirm">确定</button>
        </div>
      </form>

    </div>

    <v-mask :show="isShowLoading">
      <loading :msg="loadingMsg"></loading>
    </v-mask>

  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'
import VMask from 'components/v-mask'
import Loading from 'components/loading'

import { ERR_OK } from "api/config.js"
import { RevisePassword } from "api/user.js"

export default {
  data() {
    return {
      title: '修改密码',
      userId: Number,
      userPassword: '',
      oldPassword: '',
      newPassword1: '',
      newPassword2: '',
      isShowLoading: false,
      loadingMsg: '修改密码'
    }
  },
  components: {
    VHeader,
    VMask,
    Loading
  },
  mounted() {
    mui('.mui-input-row input').input();

    let userId = this.$store.state.userInfo.userId
    this.userId = userId

    let userPassword = this.$store.state.userInfo.userPassword
    this.userPassword = userPassword
  },
  methods: {
    confirm: function () {
      if (this.oldPassword && this.newPassword1 && this.newPassword2 && (this.newPassword1 == this.newPassword2)) {
        
        this.isShowLoading = true
        RevisePassword({
          userId: this.userId,
          userPassword: this.newPassword1
        }).then((res) => {
          this.isShowLoading = false
          if (res.code == ERR_OK) {
            mui.toast('修改成功，请重新登录')
            this.$router.replace({
              path: '/login'
            })
          }
          
        }).catch((res) => {
          this.isShowLoading = false
        })

      }
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color #fff
  .bar
    width 100%
    height 20px
    background-color $color-bg-gray
  .content
    form
      margin 0 30px
      .old, .new, .again
        display flex
        align-items center
        height 50px
        font-size $font-size-small
        border-bottom-1px(#ccc) 
        span 
          display block
          width 55px
          color #999999
          line-height 1
        .input-box
          position relative
          flex 1 
          input 
            width 100%
            height 50px
            padding-left 10px
            &::placeholder
              font-size $font-size-small-s
      .tip
        width 100%
        margin-top 8px
        text-align left
        font-size $font-size-small-s
        color red
      .confirm-btn
        width 100%
        height 45px
        margin-top 100px
        background-color $color-theme
        color #fff
        font-size $font-size-medium


</style>
